<template>
	<div>
		<a-form-model
			id="components-form-demo-normal-login"
			ref="formInline"
			:model="formInline"
			:rules="rules"
			style="margin-top: 0px"
			@submit="handleSubmit"
		>
			<a-form-model-item
				required
				has-feedback
				prop="mobile"
				:wrapper-col="{ span: 24, offset: 0 }"
			>
				<a-input
					v-model="formInline.mobile"
					:max-length="64"
					placeholder="手机号"
				>
					<a-icon slot="prefix" theme="twoTone" type="mobile" />
				</a-input>
			</a-form-model-item>
			<!-- <a-row :gutter="10" align="center"><a-col :span="16"> -->
			<a-row :gutter="10">
				<a-col :span="16">
					<a-form-model-item has-feedback prop="verify">
						<a-input
							v-model="formInline.verify"
							:max-length="6"
							placeholder="验证码"
						>
							<a-icon slot="prefix" theme="twoTone" type="mail" />
						</a-input>
					</a-form-model-item>
				</a-col>
				<a-col :span="8">
					<a-form-model-item prop="smsbtn">
						<a-button :disabled="smsbtnDisabled" block @click="handelCheckcode">
							{{ smsCodeStr }}
						</a-button>
					</a-form-model-item>
				</a-col>
			</a-row>

			<a-form-model-item
				has-feedback
				prop="autoLogin"
				:wrapper-col="{ span: 24, offset: 0 }"
			>
				<a-checkbox v-model="formInline.keep"> 7天内自动登录 </a-checkbox>
			</a-form-model-item>

			<a-form-model-item :wrapper-col="{ span: 24, offset: 0 }">
				<a-button type="primary" html-type="submit" block> 登 录 </a-button>
			</a-form-model-item>
		</a-form-model>
	</div>
</template>

<script>
	import token from "@/api/token"
	import tokenUtil from "@/utils/token"

	const uuid = tokenUtil.getUUID()
	const SMS_BUTTON_STR = "发送验证码"
	let timer = null

	export default {
		data() {
			var _this = this

			let validateMobileBlur = (rule, value, callback) => {
				if (value === "") return callback(new Error("手机号码必须输入"))

				if (!_this.$func.phoneCheck(value))
					return callback(new Error("请正确的输入手机号"))

				return callback()
			}

			let validateVerifyBlur = (rule, value, callback) => {
				if (value.length != 6)
					return callback(new Error("验证码是6位数字，请正确填写"))
				return callback()
			}

			return {
				formInline: {
					mobile: "",
					verify: "",
					keep: false,
				},
				smsCodeStr: SMS_BUTTON_STR,
				smsbtnDisabled: false,
				smsTimer: 0,
				rules: {
					mobile: [{ validator: validateMobileBlur, trigger: "blur" }],
					verify: [{ validator: validateVerifyBlur, trigger: "blur" }],
				},

				submitBtnLock: true,
			}
		},
		methods: {
			handleSubmit(e) {
				e.preventDefault()
				let validFlag = true

				this.$refs.formInline.validate((valid) => {
					if (!valid) {
						this.$message.error("信息不正确，无法登录。")
						validFlag = false
						return
					}
				})

				if (!validFlag) return

				let params = {
					mobile: this.formInline.mobile,
					verify: this.formInline.verify,
					keep: this.formInline.keep,
				}

				token.smsverify(params).then((response) => {
					if (response.code != 1) {
						this.$message.error(response.message)
						return
					}
					this.$token.set(
						response.data.access_token,
						response.data.refresh_token,
						this.formInline.keep
					)

					setTimeout(() => {
						this.$emit("ok")
					}, 800)
				})
			},

			handelCheckcode: function () {
				let validField = ["mobile"]
				let errMsg = ""
				let validFlag = true

				this.$refs.formInline.validateField(validField, (errMsg) => {
					console.log(errMsg)
					if (errMsg != "") {
						this.$message.error("请正确填写手机号码！")
						validFlag = false
						return
					}
				})

				if (!validFlag) return

				let params = {
					uuid: uuid,
					mobile: this.formInline.mobile,
				}

				this.smsTimer = 60
				this.smsCodeStr = this.smsTimer + "s后重发"
				this.smsbtnDisabled = true

				timer = setInterval(() => {
					this.smsBtnReset()
				}, 1000)

				this.$once("hook:beforeDestroy", () => {
					clearInterval(timer)
				})

				token
					.smscode(params)
					.then((response) => {
						console.log(response)
						if (response.code == 1) {
							this.$message.success("验证码已经成功下发，请查看您的手机。")
						} else {
							this.$message.error("发送短信失败：" + response.message)
						}
					})
					.catch((e) => {
						console.log(e)
					})
			},

			//短信下发后，获取验证码的button，要变灰60s
			smsBtnReset() {
				if (this.smsTimer > 0) {
					this.smsTimer--
					this.smsCodeStr = this.smsTimer + "s后重发"
					return
				}

				this.smsCodeStr = SMS_BUTTON_STR
				this.smsbtnDisabled = false
				clearInterval(timer)
				return
			},
		},
	}
</script>

<style>
	#components-form-demo-normal-login {
		width: 100%;
	}
</style>
